<script setup lang="ts">
import { TagOutlined } from "@ant-design/icons-vue";
import type { TagVo } from "@/type/post.ts";
const props = defineProps({
  allTags: {
    type: Array as () => TagVo[],
    default: () => [],
  },
});
// 标签云颜色类
const tagColorClasses = [
  "bg-blue-100 text-blue-700 hover:bg-blue-200",
  "bg-green-100 text-green-700 hover:bg-green-200",
  "bg-purple-100 text-purple-700 hover:bg-purple-200",
  "bg-yellow-100 text-yellow-700 hover:bg-yellow-200",
  "bg-red-100 text-red-700 hover:bg-red-200",
  "bg-indigo-100 text-indigo-700 hover:bg-indigo-200",
  "bg-pink-100 text-pink-700 hover:bg-pink-200",
  "bg-teal-100 text-teal-700 hover:bg-teal-200",
  "bg-cyan-100 text-cyan-700 hover:bg-cyan-200",
  "bg-gray-100 text-gray-700 hover:bg-gray-200",
];
const tagsColorClass = (tag: TagVo) => {
  return [
    tag.articleCount > 30
      ? "text-lg font-medium"
      : tag?.articleCount > 20
        ? "text-base"
        : "text-sm",
    tagColorClasses[tag.id % tagColorClasses.length],
  ];
};
</script>

<template>
  <div class="bg-white rounded-lg shadow-sm p-6">
    <h2 class="text-xl font-bold mb-6 flex items-center">
      <tag-outlined class="mr-2 text-purple-500" />
      相关标签
    </h2>
    <div class="flex flex-wrap gap-2">
      <router-link
        v-for="tag in allTags"
        :key="tag.id"
        :to="`/tag-article/${tag.name}/${tag.id}`"
        class="px-3 py-1.5 rounded-full text-sm transition-all duration-300 cursor-pointer"
        :class="tagsColorClass(tag)"
      >
        {{ tag.name }}
        <span class="text-xs opacity-70">({{ tag.articleCount }})</span>
      </router-link>
    </div>
  </div>
</template>

<style scoped></style>
